<script setup>
   

   import {ref,reactive} from 'vue'

   /**
    * 标签条件化显示控制 
    *    v-if 和 v-else 
    *      v-if="表达式"  true 显示v-if所在的标签 || false 不显示所在的标签 
    *      v-else 必须紧紧的贴着v-if,当v-if="false"会显示对应v-else
    *    v-show
    *      v-show效果看起来和v-if,但是不能配合v-else 
    *      事实上,v-if真的不会包含标签  v-show只是隐藏标签 css样式
    */

   let age = ref(16);

   let changeAge = ()=>{
     age.value  = 20;
   }

</script>

<template>
    <div>
        <p>if-else</p>
        <p v-if="age>=18">已经成年!</p>
        <p v-else>还未成年!</p>
        <p>show</p>
        <p v-show="age>=18">已经成年!</p>
        <p v-show="age<18">还未成年!</p>
        <hr>
        <button @click="changeAge()">修改年龄</button>  
    </div>
</template>

<style scoped>
</style>
